<template>
    <div class="problems_box outer_shadows">
        <label class="problems_search">
            <img src="/public/img/header/search.svg" alt="">

            <input type="text" class="outer_shadows" v-model="issue"  @input="search" placeholder="请输入您的问题描述">
        </label>

        <ul>
            <li v-for="(item,index) in problems" :key="item.id"
                v-if="problems.length>0"
                 :style="{'animation-delay': index*0.2+'s'}">
                <p><span class="problems_issue">Q</span>{{(index+1)+'.'+item.issue }}</p>
                <p><span class="problems_answer">A</span>{{ item.answer }}</p>
            </li>
            <li v-else>
                <p>抱歉，没有找到您的问题,您可以尝试一下意见反馈</p>
            </li>
        </ul>

        <div class="problems_limit">
            <button @click="next(-1)" :class="{'disabled':pages.current<=1}">上一页</button>
            <button @click="next(1)" :class="{'disabled':pages.page<=pages.current}">下一页</button>
        </div>


    </div>
</template>
<!--常见问题-->
<script setup>
import {onMounted, ref} from "vue";
import api from "@/request/index.js";
import store from "@/store/index.js";
//常见问题内容列表
const problems = ref([
    {id: "", issue: "", answer: ""},
])

//搜索延时器
const searchTimer = ref(null);
//搜索問題
const search = () => {
    if(searchTimer.value){
        clearTimeout(searchTimer.value)
    }
    pages.value.issue = issue.value;
    pages.value.current = 1;
    searchTimer.value = setTimeout(()=>{
        getData();
    },2000)




    // problems.value.length = 0;
}

//搜索问题
const issue = ref('');

//下一页或上一页
const next = (item) => {
    pages.value.current += item;
    if (pages.value.current < 1) {
        store.commit('info_sub', {msg: "已是第一页", type: "warn"});
        pages.value.current = 1;
        return;
    }
    if (pages.value.page < pages.value.current) {
        store.commit('info_sub', {msg: "已是最后一页", type: "warn"})
        pages.value.current -= 1;
        console.log(pages.value.current)
        return;
    }
    window.scroll(0, 0);
    getData();
}

//当前页码，类型，查询条数
const pages = ref({
    size: 7,//7条
    issue: "",//需要查询的问题
    current: 1, //第一页
    page: 0,//总页数
});

//预加载
onMounted(() => {
    getData();
});

//获取数据
const getData = () => {
    api.getProblemsPage(pages.value.current, pages.value.size, pages.value.issue).then((res) => {
        problems.value = res.data.data.records
        pages.value.page = res.data.data.page
    })
}


</script>

<style scoped>
.problems_box {
    width: 800px;
    margin: auto;
}

.problems_box ul {
    list-style: none;
    padding: 10px 10px;
}

.problems_box ul li {
    margin: 30px;
    transform: translateY(-50px);
    opacity: 0;
    transition: all .3s;
    animation: li_anim 1s ease 0s 1 forwards;

}
@keyframes li_anim {
     0%{
         opacity: 0;
         transform: translateY(-50px);
     }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.problems_box ul li p {
    margin: 10px;
}

.problems_issue, .problems_answer {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 2px;
    background: #6da6e1;
    font-weight: bolder;
    font-size: 20px;
    color: white;
    margin-right: 10px;
}

.problems_answer {
    background: rgba(111, 208, 153);
}

.problems_search {
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: 0 0 3px rgba(80, 158, 236, 0.3);
}

.problems_search input {
    outline: none;
    border: 0;
    height: 40px;
    width: 100%;
    text-indent: 35px;
    color: #6da6e1;
}

.problems_search input:focus {
    border: 1px solid #6da6e1;
}

.problems_search img {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    display: inline-block;
}

.problems_limit {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: center;
}

.problems_limit button {
    outline: none;
    display: flex;
    padding: 5px 7px;
    background: #6da6e1;
    color: white;
    border: 0;
    border-radius: 2px;
    margin: 0 10px;
}

.problems_limit button:hover {
    opacity: .8;
    cursor: pointer;
}

.disabled {
    opacity: .9;
}
</style>